<template>
	<view class="">
		<Tabs :tabs="tabs" :current="current" width="33" sliderBgColor="#FD1470" selectedColor="#000000" :bold="true" @change="change" ></Tabs>
		<view class="coupon" :class="[coupon_list.length==0?'coupon-active':'']" :style='{height:height+"rpx"}' >
			<view class="coupon-empty" v-if="coupon_list.length==0">
				<Empty mode="coupon" marked="您还没有可用优惠券"></Empty>
			</view>
			<view class="coupon-item-box" v-for="(item,index) in coupon_list " :key="index" >
				<view class="coupon-item" :class="[item.status==1||item.status==2?'active-color':'']">
					<view class="coupon-item-left" :class="[item.status==1||item.status==2?'active-color':'']">
						<view class="coupon-price">
							￥<text>{{parseFloat(item.coupons.coupon_price)}}</text>
						</view>
						<view class="">
							满{{parseFloat(item.coupons.use_min_price)}}可用
						</view>
					</view>
					<view class="coupon-item-right">
						<view class="coupon-item-con">
							<view class="coupon-name">
								{{item.name}}
							</view>
							<view class="coupon-box">
								<view class="coupon-time">
									有效期至{{item.create_time.split(" ")[0]}}
								</view>
								<view class="coupon-explain" @click="Explain(item)">
									详细说明 
									<Icon name="arrowdown" :size="24" color="#9A9EA9" v-if="item.iconshow"></Icon>
									<Icon name="arrowup" :size="24" color="#9A9EA9" v-else></Icon>
								</view>
							</view>
						</view>
						<view :class="[item.status==0?'btn':item.status==1||item.status==2?'btn-active':'']">
							<Btn v-if="item.status==0" @click.native="chooseCoupon(item)" marked="立即使用" backgroundColor="#FF4891" fontColor="#FFFFFF" :FontWeight="600" :fontSize="24" :width="168" :height="66" :borderRadius="60"></Btn>
							<image v-if="item.status==1" src="../../static/Shop/ysy.png" mode=""></image>
							<image v-if="item.status==2" src="../../static/Shop/ygq.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="coupon-explain-con" v-show="!item.iconshow">
					<text v-for="(v,i) in item.coupon_explain" :key="i">{{i+1+"."+v}}</text>
				</view>
			</view>
			<view class="bottom" @click="goBack">
				<image style="width: 32rpx ;height: 28rpx; margin-right: 10rpx;" src="../../static/Shop/Fill.png"></image>领取更多优惠券
			</view>
		</view>
	</view>
</template>

<script>
	import SplitLine from "../../components/bw-Split-line/bw-Split-line.vue";
	import Tabs from "../../components/bw-Tabs/bw-Tabs.vue";
	import Empty from "../../components/bw-Empty/bw-Empty.vue";
	import Icon from "../../components/bw-icon/bw-icon.vue";
	import Btn from "../../components/bw-Btn/bw-btn.vue"
	import {couponList} from "../../api/shop.js"
	export default{
		components:{
			SplitLine,
			Empty,
			Tabs,
			Icon,
			Btn
		},
		data(){
			return {
				tabs:[
					{name:"待使用"},
					{name:"已使用"},
					{name:"已过期"},
				],
				height :0,
				coupon_list:[
					
				],
				ids:"",
				ids_list:[],
				current:0,
				total_price:0,
			}
		},
		async onLoad(point) {
			this.address_id=point.addressId
			this.ids=point.ids
			this.total_price=point.pay_price
			//获取屏幕高度
			this.getHight()
			this.coupon_list=[]
			await couponList({
				status:0
			}).then(res=>{
				res.data.data.forEach(item=>{
					item["iconshow"]=true
				})
				this.coupon_list=res.data.data
				console.log(this.coupon_list)
			})
		},
		methods:{
			//获取屏幕高度
			getHight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.height = res.screenHeight*2-264
					}
				})
			},
			goBack(){
				uni.navigateTo({
					url:"/pages/shop/collect_Coupons"
				})
			},
			//选择优惠券
			chooseCoupon(item){
				//指定商品优惠
				console.log(item.coupons.type)
				//判断优惠券类型
				// if(item.coupons.type=="0"){
				// 	this.ids_list=this.ids.split(",")
				// 	this.ids_list.forEach(v=>{
				// 		console.log(v)
				// 		if(v==item.coupons.goods_id){
				// 			uni.navigateTo({
				// 				url:"/pages/orderPay/payment?ids="+this.ids+"&&couponId="+item.id+"&&addressId="+this.address_id
				// 			})
				// 		}
				// 		else{
				// 			uni.showToast({
				// 				title:"优惠条件不满足",
				// 				icon:"none"
				// 			})
				// 		}
				// 	})
				// }
				//
				if(Number(this.total_price)<Number(item.coupons.use_min_price) ){
					uni.showToast({
						title:"优惠条件不满足",
						icon:"none"
					})
				}
				else{
					uni.navigateTo({
						url:"/pages/orderPay/payment2?ids="+this.ids+"&&couponId="+item.id+"&&addressId="+this.address_id
					})
				}
				
			},
			async change(e){
				this.current=e.index
				switch(e.index){
					case 0:
					await couponList({
							status:0
						}).then(res=>{
							res.data.data.forEach(item=>{
								item["iconshow"]=true
							})
							this.coupon_list=res.data.data
						})
					break;
					case 1:
					await couponList({
							status:1
						}).then(res=>{
							res.data.data.forEach(item=>{
								item["iconshow"]=true
							})
							this.coupon_list=res.data.data
						})
					break;
					case 2:
					await couponList({
							status:2
						}).then(res=>{
							res.data.data.forEach(item=>{
								item["iconshow"]=true
							})
							this.coupon_list=res.data.data
						})
					break;
				}
			},
			Explain(item){
				item.iconshow=!item.iconshow
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-active{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.coupon{
		width: 100%;
		overflow-y: auto;
		background-color: #F9F9F9;
		.coupon-empty{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.coupon-item-box{
			width: 680rpx;
			margin: 30rpx auto;
			font-size: 24rpx;
			.active-color{
				color: #9A9EA9 !important; 
			}
			.coupon-item{
				width: 100%;
				height: 248rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.coupon-item-left{
					width: 30%;
					height: 100%;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 30rpx;
					color: #FD1470;
					font-weight: bolder;
					.coupon-price{
						font-size: 48rpx;
						margin-bottom: 20rpx;
					}
				}
				.coupon-item-right{
					width: 70%;
					height: 70%;
					display: flex;
					justify-content:space-between;
					background-color: #FFFFFF;
					border-radius: 30rpx;
					padding: 40rpx 20rpx;
					.coupon-item-con{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.coupon-name{
							font-size: 30rpx;
							font-weight: bolder;
						}
						.coupon-box{
							color: #9A9EA9;
							.coupon-time{
								
							}
							.coupon-explain{
								display: flex;
								align-items: center;
							}
						}
					}
					.btn{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: center;
					}
					.btn-active{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						image{
							width: 126rpx;
							height: 126rpx;
						}
					}
				}
			}
			.coupon-explain-con{
				background-color: #FFFFFF;
				padding: 40rpx 20rpx;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				color: #ACABAF;
				text{
					margin: 10rpx 0;
				}
			}
		}
		.bottom{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0px;
			left: 0px;
			font-size: 32rpx;
			font-weight: bolder;
		}
	}
</style>

